<template>
  <div>
    <a-breadcrumb style="margin-bottom: 10px">
      <a-breadcrumb-item>
        <icon-menu-unfold />
      </a-breadcrumb-item>
      <a-breadcrumb-item>数据监测</a-breadcrumb-item>
      <a-breadcrumb-item>发电数据</a-breadcrumb-item>
    </a-breadcrumb>

    <div>
      <a-row :gutter="12">
        <!-- 左侧设备列表树 -->
        <a-col :span="4">
          <search-tree title="设备列表" @onChange="handleTreeChange" />
        </a-col>

        <!-- 右侧数据展示区域 -->
        <a-col :span="20">
          <!-- 设备参数卡片 -->
          <a-card :loading="loading" class="first-card" v-if="configRunTimeListData && configRunTimeListData.length > 0">
            <a-grid class="row-1" :cols="{ xs: 1, sm: 2, md: 3, lg: 4, xl: 6, xxl: 8 }" :colGap="12" :rowGap="16">
              <a-card v-for="(item, index) in configRunTimeListData" :key="index" :bordered="false" hoverable
                      :body-style="{ textAlign: 'center', fontWeight: '700' }" :header-style="{ textAlign: 'center', fontWeight: '700' }">
                <template #title>{{ item.name }}</template>
                {{ item.value }} {{ item.unit }}
              </a-card>
            </a-grid>
          </a-card>

          <!-- 设备详情描述列表 -->
          <a-card :loading="loading" :style="{ padding: '20px', marginTop: configRunTimeListData && configRunTimeListData.length > 0 ? '12px' : '0px' }"
                  v-if="runTimeListData && runTimeListData.length > 0">
            <a-descriptions :column="{ lg: 2 }">
              <a-descriptions-item v-for="item of runTimeListData" :key="item.label" :label="item.label">
                <a-tooltip :content="item.time" position="right">
                  <a-tag>{{ item.value }} {{ item.unit }}</a-tag>
                </a-tooltip>
              </a-descriptions-item>
            </a-descriptions>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import SearchTree from '../../components/searchTree/index.vue';
import { getConfigRunTimeList, getRunTimeList } from '../../apis/datamonitor';
import useLoading from '../../utils/loading';

// 加载状态管理
const { loading, setLoading } = useLoading(true);

// 搜索参数
const searchParams = ref<any>({});

// 设备参数数据（第一排卡片）
const configRunTimeListData = ref<any>([]);

// 设备详情数据（第二排描述列表）
const runTimeListData = ref<any>([]);

/**
 * 处理树节点选择变化
 */
const handleTreeChange = async (val: any) => {
  searchParams.value = val;
  await fetchDeviceParams();
  await fetchDeviceDetails();
};

/**
 * 获取设备参数数据
 */
const fetchDeviceParams = async () => {
  setLoading(true);
  configRunTimeListData.value = [];

  try {
    const res = await getConfigRunTimeList(searchParams.value.deviceSn, 2);
    console.log('设备参数请求结果:', res);

    if (res.data.code === 200) {
      configRunTimeListData.value = res.data.data;
    }
  } catch (error) {
    console.error('获取设备参数失败:', error);
  } finally {
    setLoading(false);
  }
};

/**
 * 获取设备详情数据
 */
const fetchDeviceDetails = async () => {
  setLoading(true);
  runTimeListData.value = [];

  try {
    const res = await getRunTimeList(searchParams.value.deviceSn);
    console.log('设备详情请求结果:', res);

    if (res.data.code === 200 && res.data.data && res.data.data.length > 0) {
      let data: any = [];
      res.data.data.forEach((item: any) => {
        data.push({
        label: item.name,
        value: item.value,
        time: item.time,
        key: item.key,
        unit: item.unit,
        varType: item.varType
        })
      });

      runTimeListData.value = data;
    }
  } catch (error) {
    console.error('获取设备详情失败:', error);
  } finally {
    setLoading(false);
  }
};

// 组件挂载时初始化数据
onMounted(async () => {
  // 这里可以添加默认加载第一个设备数据的逻辑
});
</script>

<style lang="less" scoped>
.first-card {
  .row-1 .arco-card {
    background-color: var(--color-fill-2);
  }
}
</style>